<template>
    <div class='page-content'>
        <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
            <div slot="top" v-if="isShowSearch">
                <el-form label-width="90px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="关键词：">
                                <el-input v-model="word" type="text" placeholder="请输入昵称或手机号" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="success" @click="exportExcel">导出</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-row>
                    </el-row>
                </el-form>
            </div>
        </table-bar>
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="ID" width="80" prop="id" v-if="columns[0].show"/>
            <el-table-column label="头像" width="120" prop="avatar" v-if="columns[1].show">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" style="width: 50px;height: 50px;" @click="clickBig(scope.row.avatar)"/>
                </template>
            </el-table-column>
            <el-table-column label="昵称" width="120" prop="nickname" v-if="columns[2].show"/>
            <el-table-column label="手机号" width="120" prop="mobile" v-if="columns[3].show"/>
            <el-table-column label="余额" width="120" prop="price" v-if="columns[4].show"/>
            <el-table-column label="绑定营地" width="120" prop="camp_name" v-if="columns[5].show"/>
            <el-table-column label="分销商?" width="120" prop="is_distribution" v-if="columns[6].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.is_distribution == 1">
                        <el-tag size="mini" type="success">是</el-tag>
                    </template>
                    <template v-else>
                        <el-tag size="mini" type="danger">否</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="100" prop="remark" v-if="columns[7].show"/>
            <el-table-column label="注册时间" width="140" prop="create_time" v-if="columns[8].show"/>
            <el-table-column label="最后登陆时间" width="120" prop="last_login_time" v-if="columns[9].show"/>
            <el-table-column fixed="right" label="操作" :width="setWidth" v-if="isShowEdit">
                <template slot-scope="scope">
                    <template v-if="scope.row.camp_id == 0">
                        <el-button type="primary" @click="bindCampModel(scope.row)" v-if="isShowEdit">营地绑定</el-button>
                    </template>
                    <template v-else>
                        <el-button type="danger" @click="onBindCampModel(scope.row)" v-if="isShowEdit">营地解绑</el-button>
                    </template>
                    <template v-if="scope.row.is_distribution == 0">
                        <el-button type="primary" @click="distributionModel(scope.row)" v-if="isShowEdit">分销</el-button>
                    </template>
                    <template v-else>
                        <el-button type="danger" @click="onDistributionModel(scope.row)" v-if="isShowEdit">取消分销</el-button>
                    </template>
                    <el-button type="success" @click="sendCouponModel(scope.row)" v-if="isShowEdit">发放卡券</el-button>
                    <el-button type="primary" @click="sendPriceModel(scope.row)" v-if="isShowEdit">余额变更</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-if="allpage>10">
            <el-pagination @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-size="10"
                            layout="total, prev, pager, next, jumper"
                            :total="allpage">
            </el-pagination>
        </template>
        <el-dialog :visible.sync="dialogBigVisible" width="60%">
            <img :src="bigSrc" style="width:100%;display: block">
        </el-dialog>
        <el-dialog title="绑定营地" :visible.sync="dialogVisible" width="30%">
            <el-form :model="model" label-width="80px" class="demo-ruleForm">
                <el-form-item label="营地">
                    <el-select v-model="model.camp_id" style="width:100%" placeholder="请选择营地">
                        <el-option v-for="(item,index) in campList" :label="item.name" :value="item.id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmitBindCamp">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="发放卡券" :visible.sync="dialogCouponVisible" width="30%">
            <el-form :model="couponModel" label-width="80px" class="demo-ruleForm">
                <el-form-item label="卡券名称">
                    <el-input v-model="couponModel.name" type="text" placeholder="请输入卡券名称" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="卡券金额">
                    <el-input v-model="couponModel.price" type="number" placeholder="请输入卡券金额" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="过期时间">
                    <el-date-picker v-model="couponModel.end_time" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="couponModel.remark" type="text" placeholder="请输入备注" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogCouponVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmitCoupon">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="余额变更" :visible.sync="dialogPriceVisible" width="30%">
            <el-form :model="priceModel" label-width="80px" class="demo-ruleForm">
                <el-form-item label="变更类型">
                    <el-select v-model="priceModel.type" style="width:100%" placeholder="请选择变更类型">
                        <el-option label="增加" value="3"></el-option>
                        <el-option label="减少" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更金额">
                    <el-input v-model="priceModel.price" type="number" placeholder="请输入变更金额" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="priceModel.remark" type="text" placeholder="请输入备注" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogPriceVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmitPrice">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
    import {getUserApplyList,editUserApply,deleteUserApply,publishedUserApply} from '@/api/user/userApplyApi';
    import {editUserCoupon} from '@/api/user/userCouponApi';
    import {editUserPriceRecord} from '@/api/user/userPriceRecordApi';
    import {baseUrl} from '@/utils/config.js';

export default {
    data() {
        return {
            lists: [],
            allpage: 1,//总页数
            showItem: 5,//分页显示得中间按钮个数
            current: 1,//当前页
            word: '',
            isShowAdd:false,
            isShowEdit:false,
            isShowDelete:false,
            isShowSearch:false,
            setWidth:0,
            model: {},
            dvEdit: false,
            dialogBigVisible: false,
            bigSrc: '',
            campList:[],
            dialogVisible:false,
            columns: [
                {name: "ID", show: true},
                {name: "头像", show: true},
                {name: "昵称", show: true},
                {name: "手机号", show: true},
                {name: "余额", show: true},
                {name: "绑定营地", show: true},
                {name: "分销商?", show: true},
                {name: "备注", show: true},
                {name: "注册时间", show: true},
                {name: "最后登陆时间", show: true},
            ],
            couponModel:{},
            dialogCouponVisible:false,
            exportExcelUrl:baseUrl + '/user/exportExcel',
            dialogPriceVisible:false,
            priceModel:{}
        };
    },
    created: function () {
        this.loadButtonAuth();
        this.handleCurrentChange(1);
        this.getCampList();
    },
    methods: {
        exportExcel:function(){
            window.location.href = this.exportExcelUrl + '?word=' + this.word;
        },
        sendCouponModel:function(row){
            this.couponModel = {'user_id':row.id};
            this.dialogCouponVisible = true;
        },
        sendPriceModel:function(row){
            this.priceModel = {'user_id':row.id};
            this.dialogPriceVisible = true;
        },
        onSubmitPrice:function(){
            this.$confirm("您确认要对该用户进行余额变更操作，该操作不可逆，请确认变更的类型和金额是否正确?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                editUserPriceRecord({
                    user_id: this.priceModel.user_id,
                    type: this.priceModel.type,
                    price: this.priceModel.price,
                    remark: this.priceModel.remark,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                        this.dialogPriceVisible = false;
                    }
                })
            }).catch(() => {
            })
        },
        onSubmitCoupon:function(){
            this.$confirm("您确认要对该用户发放本次卡券，该操作不可逆，请确认发放卡券的金额是否正确?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                editUserCoupon({
                    user_id: this.couponModel.user_id,
                    name: this.couponModel.name,
                    price: this.couponModel.price,
                    end_time: this.couponModel.end_time,
                    remark: this.couponModel.remark,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.dialogCouponVisible = false;
                    }
                })
            }).catch(() => {
            })
        },
        getCampList:function(){
            getCampListAll().then(res => {
                this.campList = res.data.lists;
            })
        },
        clickBig: function (img) {
            this.bigSrc = img;
            this.dialogBigVisible = true;
        },
        loadButtonAuth: function () {
            getLoadButtonIsShow({
                path: this.$route.path,
            }).then(res => {
                this.isShowAdd = res.data.isShowAdd;
                this.isShowEdit = res.data.isShowEdit;
                this.isShowDelete = res.data.isShowDelete;
                this.isShowSearch = res.data.isShowSearch;
                this.isShowExport = res.data.isShowExport;
                this.setWidth = res.data.setWidth;
            })
        },
        handleCurrentChange: function (index) {
            this.current = index;
            getUserList({
                page: index,
                word: this.word,
            }).then(res => {
                this.lists = res.data.lists;
                this.allpage = res.data.allpage;
            })
        },
        reset: function () {
            this.word = '';
        },
        search: function () {
            this.handleCurrentChange(1);
        },
        bindCampModel:function(row){
            this.model = row;
            this.dialogVisible = true;
        },
        onSubmitBindCamp:function(){
            bindCampUser({
                id: this.model.id,
                camp_id: this.model.camp_id,
            }).then(res => {
                if (res.code === 1) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dialogVisible = false;
                    this.handleCurrentChange(this.current);
                }
            })
        },
        distributionModel:function(row){
            this.$confirm("您确认要设定该用户为分销商?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                distributionUser({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
        onDistributionModel:function(row){
            this.$confirm("您确认要取消该用户的分销身份?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                distributionUser({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
        onBindCampModel:function(row){
            this.$confirm("您确认要对该用户进行解绑营地操作，解绑后小程序端将不能进行核销订单操作?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                onBindCampUser({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout()
        },
    },
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

</style>

